<template>
  <div class="tab">
  <ul class="tab-list">
    <li v-bind:class="['tab-item']"
        v-for="streamer in streamers">
          <a v-bind:class="['tab-item--link',
                          {'tab-active' : isActiveTab(streamer.name)},
                          {'tab-item--grouped' : isGrouped(streamer.name) }]"
              v-on:click="selectTab(streamer.name)">
            <span>{{ streamer.name }}</span>
            <span class="tab-action" v-show="!(isGrouped(streamer.name))">
              <i class="fa fa-trash" v-on:click="removeTab(streamer.id)"></i>
              <i class="fa fa-pencil" v-on:click="toggleEditForm($event)"></i>
              <tab-form action="edit"
                v-if="!editfold"
                v-bind:editfold="editfold"
                v-bind:streamers.sync="streamers">
              </tab-form>
            </span>
          </a>
    </li>
    <li class="tab-item tab-item--add tab-item--unfold">
      <tab-form action="add"
        v-bind:fold="fold"
        v-bind:streamers.sync="streamers"
        v-bind:grouped.sync="grouped"
        v-bind:maxgroup="maxgroup">
      </tab-form>
      <div v-bind:class="['tab-item--form', fold?'link-fold':'link-unfold']"
            v-on:click="toggleForm($event)">
            <a href="">
              <i v-bind:class="['fa', 'fa-plus', 'icon', fold?'icon-default':'icon-add']"></i>
            </a>
      </div>
    </li>
  </ul>
  </div>
</template>

<script>
  'use strict';
  import mousetrap from 'mousetrap';
  import R from 'ramda';

  import store from '../../store';
  import tabform from './form.vue';

  export default {
    data() {
      return {
        streamers: this.$select('streamers'),
        fold: true,
        editfold: true,
        selected: this.$select('selected'),
        grouped: false,
        maxgroup: 5,
      };
    },
    components: {
      'tab-form': tabform,
    },
    ready() {
      mousetrap.bind(['command+left', 'ctrl+left'], () => {
        this.previousTab();
        return false;
      });
      mousetrap.bind(['command+right', 'ctrl+right'], () => {
        this.nextTab();
        return false;
      });
      this.grouped = this.streamers.length - 1 > this.maxgroup;
      return false;
    },
    methods: {
      previousTab() {
        const { previousTab } = store.actions;
        store.dispatch(previousTab());
      },
      nextTab() {
        const { nextTab } = store.actions;
        store.dispatch(nextTab());
      },
      removeTab(tabId) {
        const { removeTab } = store.actions;
        this.grouped = this.streamers.length - 1 > this.maxgroup;
        store.dispatch(removeTab(tabId));
      },
      selectTab(tabName) {
        const { selectTab } = store.actions;
        store.dispatch(selectTab(tabName));
      },
      isActiveTab(tabName) {
        return tabName === this.selected.name;
      },
      isGrouped(tabName) {
        return this.grouped && !(this.isActiveTab(tabName));
      },
      toggleForm(e) {
        if (e) {
          e.preventDefault();
        }
        this.fold = !(this.fold);
      },
      toggleEditForm(e) {
        if (e) {
          e.preventDefault();
        }
        this.editfold = !(this.editfold);
      },
    }
  };
</script>
